import { vw } from '@/common/dimensions'
import LazyImage from '@/components/LazyImage'
import { SceneItemType } from '@/store/home'
import React from 'react'
import { Image, Pressable, StyleSheet, View } from 'react-native'
import SceneFooter from './SceneFooter'
import TopLeftIcon from '../TopLeftIcon'
import { router } from 'expo-router'


export default function TempScene(props:{sceneItem:SceneItemType}) {
    let { sceneItem } = props
    let { iconPath } = sceneItem
    let cover_image = (sceneItem.json_content.cover_image) as string
    const handleOnPress = () => {
        router.navigate({
            pathname:'/createStyler',
            params:{
                id:sceneItem.id
            }
        })
    }
    return (
        <Pressable onPress={handleOnPress} >
            <View style={styles.root}>
                <TopLeftIcon iconPath={iconPath} />
                {/* <Image style={styles.sceneImage} source={{ uri:cover_image }}/>  对比效果查看 */}
                <LazyImage
                    style={styles.sceneImage}
                    uri={cover_image}
                    defaultSource={require('@/assets/common/perch.png')}
                />
                <SceneFooter
                    title={sceneItem.json_content.cn.title}
                    points={sceneItem.points_json.points}
                />
            </View>
        </Pressable>
    )
}
const styles = StyleSheet.create({
    root:{
        width: 46 * vw,
        height: 59 * vw,
        borderRadius: 16,
        marginBottom:16
    },
    sceneImage:{
        width: '100%',
        height: '100%',
        borderRadius: 16
    }
})
